<template>
  <view class="my">
    <image class="my_bgimg" src="/static/my/bgimg2.png" />
    <view class="my_info">
      <image class="my_info_imgurl" @click="getinfo" v-if="userStore.userInfo?.babySex == 0" src="/static/tabs/girl.png"
        mode="aspectFill" />
      <image class="my_info_imgurl" v-else src="/static/tabs/boy.png" mode="aspectFill" @click="getinfo" />
      <view class="my_info_name">{{ userStore.userInfo?.nickName }}
        <image class="my_info_icon" src="/static/my/icon-rt.png" mode="aspectFill" @click="getinfo" />
      </view>
    </view>
    <view class="my_center">
      <!-- <view class="my_center_list">
        <view class="my_center_list_item" @click="getmasg">
          <image src="/static/my/nav1.png" />
          <text>宝宝测试</text>
        </view>
        <view class="my_center_list_item" @click="getmasg">
          <image src="/static/my/nav2.png" />
          <text>亲职测评</text>
        </view>
        <view class="my_center_list_item" @click="getmasg">
          <image src="/static/my/nav3.png" />
          <text>甄选商城</text>
        </view>
      </view> -->
      <view class="my_center_container">
        <view class="my_center_container_list">
          <!-- <view class="my_center_container_list_item">
            <image class="img" src="/static/my/xiaoxi.png" mode="" />
            <view>消息</view>
            <image class="icon" src="/static/tabs/jiantou.png" mode="" />
          </view> -->
          <view class="my_center_container_list_item" @click="goaboutUs">
            <image class="img" src="/static/my/Frame.png" mode="" />
            <view>关于我们</view>
            <image class="icon" src="/static/tabs/jiantou.png" mode="" />
          </view>
          <!-- <view class="my_center_container_list_item">
            <image class="img" src="/static/my/fankui.png" mode="" />
            <view>相关问题</view>
            <image class="icon" src="/static/tabs/jiantou.png" mode="" />
          </view> -->
          <view class="my_center_container_list_item" @click="maskflag = true">
            <image class="img" src="/static/my/Frame2.png" mode="" />
            <view>客服</view>
            <image class="icon" src="/static/tabs/jiantou.png" mode="" />
          </view>
        </view>
      </view>
    </view>
    <view class="my-mask" v-if="maskflag" @click="maskflag = false">
      <view>
        <image class="img" src="/static/tabs/qurd.jpg" />
        <text>长按添加老师微信咨询</text>
        <image class="icon" src="/static/my/guanbi.png"></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { login } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const maskflag = ref(false)
onLoad(async () => {

})
onShow(() => {
})
const getmasg = () => {
  uni.showToast({
    title: '敬请期待~',
    duration: 2000,
    icon: 'none'
  })
}
const getinfo = () => {
  console.log('aaaa');

  if (!userStore.userInfo?.token) {
    console.log('qqq');

    getlogin()
  } else {
    console.log(1111);

    uni.navigateTo({
      url: '/pages/editinfo/index'
    })
  }
}
const goaboutUs = () => {
  uni.navigateTo({
    url: '/pages/AboutUs/index'
  })
}
const getlogin = () => {
  wx.login({
    async success(res) {
      if (res.code) {
        //发起网络请求
        let logdata: any = await login({ code: res.code, courseGroup: 'weekAgeV2' })
        if (logdata.code == 0) {
          console.log(logdata, 'logdata');
          const result = { ...logdata.data }
          userStore.setUserInfo(result)
          if (logdata.data.babyId == -1) {
            uni.navigateTo({
              url: '/pages/infos/index'
            })
          } else {
            uni.navigateTo({
              url: '/pages/editinfo/index'
            })
          }
        }
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  })
}
</script>

<style lang="scss">
page {
  background-color: #F8F8F8;
}

.my {
  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .77);

    view {
      width: 530rpx;
      height: 598rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-size: 100%;
      background-position: top;
      background-repeat: no-repeat;
      background-image: url('https://babycare-zjmf.oss-cn-beijing.aliyuncs.com/default/img/2025/06/21/399c9800da702dff0399ae8225c22113.png');
    }

    .img {
      width: 297rpx;
      height: 296rpx;
      position: absolute;
      top: 102rpx;
      left: 50%;
      transform: translateX(-50%);
    }

    .icon {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      bottom: -100rpx;
      left: 50%;
      transform: translateX(-50%);
    }

    text {
      width: 100%;
      text-align: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      position: absolute;
      top: 422rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  &_bgimg {
    width: 100%;
    height: 482rpx;
    position: fixed;
    top: 0;
    z-index: -1;
  }

  &_info {
    margin: auto;
    margin-top: 170rpx;
    width: 100%;
    text-align: center;

    &_imgurl {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: pink;
    }

    &_name {
      margin-top: 12rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #000000;
    }

    &_icon {
      width: 32rpx;
      height: 32rpx;
      // background: #FFA97F;
    }
  }

  &_center {
    width: 100%;
    margin-top: 20rpx;

    &_list {
      display: flex;
      margin: 0 34rpx 0;
      height: 134rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 40rpx 0;

      &_item {
        flex: 1 1 30%;
        text-align: center;

        image {
          width: 80rpx;
          height: 80rpx;
        }

        text {
          font-weight: 400;
          font-size: 30rpx;
          color: #2F2F2F;
          line-height: 42rpx;
          display: block;
        }
      }
    }

    &_container {
      margin: 20rpx 34rpx;

      &_list {
        padding: 0 32rpx;
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        border-radius: 16rpx;
        margin-top: 16rpx;

        &_item {
          width: calc(100vw - 132rpx);
          height: 100rpx;
          position: relative;
          border-bottom: 2rpx solid #F3F3F3;

          .img {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            left: 0;
            top: 30rpx;
          }

          view {
            font-weight: 500;
            font-size: 30rpx;
            color: #000000;
            line-height: 100rpx;
            position: absolute;
            left: 64rpx;
          }

          .icon {
            width: 14rpx;
            height: 24rpx;
            position: absolute;
            right: 0;
            top: 46rpx;
          }
        }

        &_item:last-child {
          border: none;
        }
      }
    }
  }
}
</style>
